<template>
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">
                <el-form-item label="运费模版id" label-width="85px" prop="templateId">
                    <el-input v-model="state.queryParams.templateId" placeholder="请输入运费模版id" clearable
                        style="width: 240px" />
                </el-form-item>
                <el-form-item label="首件数量" label-width="70px" prop="maxPieceQuantity">
                    <el-input v-model="state.queryParams.maxPieceQuantity" placeholder="请输入首件数量" clearable
                        style="width: 240px" />
                </el-form-item>
                <el-form-item label="不超过首件数量的价格(元)" label-width="180px" prop="maxPiecePrice">
                    <el-input v-model="state.queryParams.maxPiecePrice" placeholder="请输入首件数量的价格" clearable
                        style="width: 240px" />
                </el-form-item>
                <el-form-item label="续件数量" prop="successor">
                    <el-input v-model="state.queryParams.successor" placeholder="请输入续件数量，" clearable
                        style="width: 240px" />
                </el-form-item>
                <el-form-item label="续费价格(元)" label-width="100px" prop="renew">
                    <el-input v-model="state.queryParams.renew" placeholder="请输入续费价格" clearable
                        style="width: 240px" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery(proxy)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 表格 结果展示 -->
        <el-card style="margin-top: 20px;">

            <template #header>
                <el-row :gutter="10">
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:add']" type="primary" plain icon="Plus"
                            @click="addOrUpdateHandle()">新增</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:edit']" type="success" plain icon="Edit"
                            :disabled="state.single" @click="addOrUpdateHandle(state.ids)">修改</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button v-hasPermi="['exercise:addresses:remove']" type="danger" plain icon="Delete"
                            :disabled="state.multiple" @click="deleteBatchHandle(state.ids)">删除</el-button>
                    </el-col>
                    <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getDataList"></right-toolbar>

                </el-row>
            </template>

            <el-table v-loading="state.dataListLoading" :data="state.rows" style="width: 100%"
                @selectionChange="selectionChangeHandle">
                <el-table-column type="selection" align="center" width="55" />
                <el-table-column label="运费模版id" align="center" prop="templateId" />
                <el-table-column label="首件数量(超过这个数量另收费)" align="center" prop="maxPieceQuantity" />
                <el-table-column label="不超过首件数量的价格(单位:元)" align="center" prop="maxPiecePrice" />
                <el-table-column label="续件数量，每n件另收费" align="center"  prop="successor" />
                <el-table-column label="续费价格(单位:元)" align="center" prop="renew" :show-overflow-tooltip="true" />
                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                    <template #default="state">
                        <el-button v-hasPermi="['exercise:addresses:edit']" circle type="primary" icon="Edit"
                            @click="addOrUpdateHandle(state.row.templateId)" />
                        <el-button v-hasPermi="['exercise:addressesstate.ids[0]remove']" circle type="danger"
                            icon="Delete" @click="deleteHandle(state.row.templateId)" />
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="state.total > 0" v-model:page="state.queryParams.pageNum"
                v-model:limit="state.queryParams.pageSize" :total="state.total" @pagination="getDataList" />
        </el-card>

        <!-- 引用新增或修改的
                界面 -->
        <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script lang="ts" setup>
import {IHooksOptions} from '@/hooks/interfaceservice'
import {useCrud} from '@/hooks/indexservice'
/* eslint-disable camelcase */
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance } from 'vue'
import { delFreightTemplate, listFreightTemplate } from '@/api/app/store/freightTemplate';

import AddOrUpdate from './add-and-edit.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
	queryApi: listFreightTemplate,
	deleteApi: delFreightTemplate,
    exportApi: undefined,
	//主键名称
	primaryKey:'templateId',
	queryForm:  {
		page:1,
		size:10,
	},
    //日期查询
    dateRange:[]
})

//vue3中叫组合式函数
const { getDataList,  selectionChangeHandle,
        sortChangeHandle, resetQuery,deleteHandle, deleteBatchHandle }=useCrud(state)

// 调用新增或修改页面的方法
const addOrUpdateRef = ref()
//新增或修改的时候传递templateId
const addOrUpdateHandle = (templateId?: number) => {
    //调用它里面的init方法
	addOrUpdateRef.value.init(templateId)
}


</script>

<style>
</style>
